import request from "../../utils/request";

Page({
  data: {
    navListData: [],   // 导航栏nav数据
    tapNavId: 0,    // 点击nav导航栏id
    videoGroupData: [],    // video视频数据
    playVideoId: '',    //点击播放视屏id, 用于判断用户是否暂停之后再播放
    playedVideoList: [],  // 播放过的video，记录播放时间，下次播放可直接跳转到上次播放时间
    refresher: false,   // 下拉刷新
    isLoading: false,  // 是否正在上拉加载
  },
  onLoad: function (options) {
    // 获取导航数据
    this.getNavListData();
  },

  // 跳转到搜索页面
  goSearch(){
    wx.navigateTo({
      url: '/pages/search/search'
    })
  },

  // 滚动到底部上拉加载
  async handleScrollBottom(){
    let {isLoading} = this.data;
    if (isLoading) return;

    this.setData({
      isLoading: true
    });

    let {tapNavId, videoGroupData} = this.data;
    let res = await request('/video/group', {id: tapNavId});
    if (res.code === 200) {
      // 新数据放在后面
      videoGroupData = [...videoGroupData, ...res.datas];
      videoGroupData.map(item => item.vid = item.data.vid);
      this.setData({
        videoGroupData,
        refresher: false,
        isLoading: false
      })
    }
  },


  // 下拉刷新
  async handleRefresher(){
    let {tapNavId, videoGroupData} = this.data;
    let res = await request('/video/group', {id: tapNavId});
    if (res.code === 200) {
      // 新数据放在前面
      videoGroupData = [...res.datas,...videoGroupData];
      videoGroupData.map(item => item.vid = item.data.vid);
      this.setData({
        videoGroupData,
        refresher: false
      })
    }
  },

  // 点击视频进行播放，并关闭其他视频
  videoPlay(event){
    let {id} = event.currentTarget;
    let {playedVideoList} = this.data;
    this.setData({
      playVideoId: id,
    });

    // 在播放列表中查询是否播放过
    let index = playedVideoList.findIndex(item=>item.id === id);

    if (index === -1){  // 没有播放过
      // 以前的视频会因为页面image与video组件切换时销毁，页面始终只有0或1个video，其他都是img，因此不需要关闭VideoContext
      // id !== playVideoId && this.videoContext && this.videoContext.stop();

      // 点击一次, image组件销毁，video组件渲染，但是video未播放，手动控制其播放
      let videoContext = wx.createVideoContext(id);
      videoContext.play();
    } else {  // 播放过，跳转到指定播放位置
      let videoContext = wx.createVideoContext(id);
      videoContext.seek(playedVideoList[index].currentTime)
    }

  },

  // 视频播放时，播放时间更新
  videoPlayUpdate(event){
    let {id} = event.currentTarget;
    let {currentTime} = event.detail;
    let {playedVideoList} = this.data;

    let index = playedVideoList.findIndex(item=>item.id === id);

    if (index === -1) {  // 播放列表中没有找到，将其放入播放列表中
      playedVideoList.push({id,currentTime});
    } else {   // 播放列表中找到了，更改播放时间
      playedVideoList[index].currentTime = currentTime
    }

    this.setData({
      playedVideoList
    })

  },

  // 播放结束，将其播放记录删除，下次可以重新播放
  videoPlayEnd(event){
    let {id} = event.currentTarget;
    let {playedVideoList} = this.data;
    let index = playedVideoList.findIndex(item=>item.id===id)
    playedVideoList.splice(index, 1);
    this.setData({
      playedVideoList
    })
  },

  // 点击导航标签
  tapNavItem(event){
    let id = event.currentTarget.dataset.id;
    this.setData({
      tapNavId: id
    });

    // 根据id获取视频数据
    this.getVideoGroupById();
  },

  // 获取导航数据
  async getNavListData(){
    let res = await request('/video/group/list');
    if (res.code === 200){
      this.setData({
        navListData: res.data.slice(0,14),
        tapNavId: res.data[0].id
      })
    }

    // 根据id获取视频数据
    this.getVideoGroupById();
  },

  // 根据id获取视频数据
  async getVideoGroupById(refresh){
    this.setData({
      videoGroupData: []
    });
    wx.showLoading({
      title: '正在加载中...',
    });
    let {tapNavId} = this.data;
    let res = await request('/video/group', {id: tapNavId});
    if (res.code === 200) {
      res.datas.map(item => item.vid = item.data.vid);
      this.setData({
        videoGroupData: res.datas
      },()=>{
        wx.hideLoading();
      })
    }
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function ({from}) {
    if (from === 'menu'){
      return {
        title: '来自menu转发',
        path: '/pages/video/video',
        imageUrl: '/static/images/nvsheng.jpg'
      }
    } else {
      return {
        title: '来自button转发',
        path: '/pages/video/video',
        imageUrl: '/static/images/nvsheng.jpg'
      }
    }
  }
});